@font-face {
  font-family: 'DINPro';
  src: url(fonts/dinpro/dinpro-black/dinpro-black.eot);
  src: local("DINPro Black"), local("DINPro-Black"), url(fonts/dinpro/dinpro-black/dinpro-black.eot) format("embedded-opentype"), url(fonts/dinpro/dinpro-black/dinpro-black.woff2) format("woff2"), url(fonts/dinpro/dinpro-black/dinpro-black.woff) format("woff"), url(fonts/dinpro/dinpro-black/dinpro-black.ttf) format("truetype"), url(fonts/dinpro/dinpro-black/dinpro-black.svg) format("svg");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "DINPro-Black";
  src: url(fonts/dinpro/dinpro-black/dinpro-black.eot);
  src: local("DINPro Black"), local("DINPro-Black"), url(fonts/dinpro/dinpro-black/dinpro-black.eot) format("embedded-opentype"), url(fonts/dinpro/dinpro-black/dinpro-black.woff2) format("woff2"), url(fonts/dinpro/dinpro-black/dinpro-black.woff) format("woff"), url(fonts/dinpro/dinpro-black/dinpro-black.ttf) format("truetype"), url(fonts/dinpro/dinpro-black/dinpro-black.svg) format("svg");
}

@font-face {
  font-family: 'DINPro';
  src: url(fonts/dinpro/dinpro-bold/dinpro-bold.eot);
  src: local("DINPro Bold"), local("DINPro-Bold"), url(fonts/dinpro/dinpro-bold/dinpro-bold.eot) format("embedded-opentype"), url(fonts/dinpro/dinpro-bold/dinpro-bold.woff2) format("woff2"), url(fonts/dinpro/dinpro-bold/dinpro-bold.woff) format("woff"), url(fonts/dinpro/dinpro-bold/dinpro-bold.ttf) format("truetype"), url(fonts/dinpro/dinpro-bold/dinpro-bold.svg) format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "DINPro-Bold";
  src: url(fonts/dinpro/dinpro-bold/dinpro-bold.eot);
  src: local("DINPro Bold"), local("DINPro-Bold"), url(fonts/dinpro/dinpro-bold/dinpro-bold.eot) format("embedded-opentype"), url(fonts/dinpro/dinpro-bold/dinpro-bold.woff2) format("woff2"), url(fonts/dinpro/dinpro-bold/dinpro-bold.woff) format("woff"), url(fonts/dinpro/dinpro-bold/dinpro-bold.ttf) format("truetype"), url(fonts/dinpro/dinpro-bold/dinpro-bold.svg) format("svg");
}

@font-face {
  font-family: 'DINPro';
  src: url(fonts/dinpro/dinpro-light/dinpro-light.eot);
  src: local("DINPro Light"), local("DINPro-Light"), url(fonts/dinpro/dinpro-light/dinpro-light.eot) format("embedded-opentype"), url(fonts/dinpro/dinpro-light/dinpro-light.woff2) format("woff2"), url(fonts/dinpro/dinpro-light/dinpro-light.woff) format("woff"), url(fonts/dinpro/dinpro-light/dinpro-light.ttf) format("truetype"), url(fonts/dinpro/dinpro-light/dinpro-light.svg) format("svg");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "DINPro-Light";
  src: url(fonts/dinpro/dinpro-light/dinpro-light.eot);
  src: local("DINPro Light"), local("DINPro-Light"), url(fonts/dinpro/dinpro-light/dinpro-light.eot) format("embedded-opentype"), url(fonts/dinpro/dinpro-light/dinpro-light.woff2) format("woff2"), url(fonts/dinpro/dinpro-light/dinpro-light.woff) format("woff"), url(fonts/dinpro/dinpro-light/dinpro-light.ttf) format("truetype"), url(fonts/dinpro/dinpro-light/dinpro-light.svg) format("svg");
}

@font-face {
  font-family: 'DINPro';
  src: url(fonts/dinpro/dinpro-medium/dinpro-medium.eot);
  src: local("DINPro Medium"), local("DINPro-Medium"), url(fonts/dinpro/dinpro-medium/dinpro-medium.eot) format("embedded-opentype"), url(fonts/dinpro/dinpro-medium/dinpro-medium.woff2) format("woff2"), url(fonts/dinpro/dinpro-medium/dinpro-medium.woff) format("woff"), url(fonts/dinpro/dinpro-medium/dinpro-medium.ttf) format("truetype"), url(fonts/dinpro/dinpro-medium/dinpro-medium.svg) format("svg");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "DINPro-Medium";
  src: url(fonts/dinpro/dinpro-medium/dinpro-medium.eot);
  src: local("DINPro Medium"), local("DINPro-Medium"), url(fonts/dinpro/dinpro-medium/dinpro-medium.eot) format("embedded-opentype"), url(fonts/dinpro/dinpro-medium/dinpro-medium.woff2) format("woff2"), url(fonts/dinpro/dinpro-medium/dinpro-medium.woff) format("woff"), url(fonts/dinpro/dinpro-medium/dinpro-medium.ttf) format("truetype"), url(fonts/dinpro/dinpro-medium/dinpro-medium.svg) format("svg");
}

@font-face {
  font-family: 'DINPro';
  src: url(fonts/dinpro/dinpro-regular/dinpro-regular.eot);
  src: local("DINPro Regular"), local("DINPro-Regular"), url(fonts/dinpro/dinpro-regular/dinpro-regular.eot) format("embedded-opentype"), url(fonts/dinpro/dinpro-regular/dinpro-regular.woff2) format("woff2"), url(fonts/dinpro/dinpro-regular/dinpro-regular.woff) format("woff"), url(fonts/dinpro/dinpro-regular/dinpro-regular.ttf) format("truetype"), url(fonts/dinpro/dinpro-regular/dinpro-regular.svg) format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "DINPro-Regular";
  src: url(fonts/dinpro/dinpro-regular/dinpro-regular.eot);
  src: local("DINPro Regular"), local("DINPro-Regular"), url(fonts/dinpro/dinpro-regular/dinpro-regular.eot) format("embedded-opentype"), url(fonts/dinpro/dinpro-regular/dinpro-regular.woff2) format("woff2"), url(fonts/dinpro/dinpro-regular/dinpro-regular.woff) format("woff"), url(fonts/dinpro/dinpro-regular/dinpro-regular.ttf) format("truetype"), url(fonts/dinpro/dinpro-regular/dinpro-regular.svg) format("svg");
}

html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  cursor: default;
  font-size: 17px;
}

/*
** Lessons
*/

.lecon-titre {
  font-family: "DINPro-Bold";
  font-size: 20px;
  background-color: #FFFFFF;
  text-align: center;
  margin: 50px;
}

.lecon-rubrique {
  font-family: "DINPro-Medium";
  font-size: 17px;
  color: #8A8A8A;
  background-color: #EDF5F7;
  text-align: left;
  margin: 30px 60px;
  border: 1px solid #dfdee0;
  border-radius: 6px;
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20);
  padding: 15px;

}

.lecon-rubrique-titre {
  font-family: "DINPro-Bold";
  font-size: 20px;
  color: #368BD1;
  margin-bottom: 20px;
  padding-left: 20px;
  letter-spacing: 0.05em;
}

.lecon-intertitre {
  font-family: "DINPro-Medium";
  font-size: 18px;
  color: #02A7E4;
  margin-bottom: 10px;
  padding-left: 35px;
}

.lecon-paragraphe-tiret {
  padding-left: 45px;
  font-size: 17px;
}

.lecon-mise-en-valeur {
  font-family: "DINPro-Black";
  color: #8A8A8A;
}

.lecon-paragraphe {
  font-family: "DINPro-Medium";
  color: #02A7E4;
  padding-left: 35px;
  margin-top: 15px;
  margin-bottom: 10px;
  font-size: 18px;
}

.lecon-paragraphe-exemple {
  padding-left: 45px;
  font-size: 17px;
}

.lecon-paragraphe-puce {
  font-family: "DINPro-Medium";
  color: #02A7E4;
  padding-left: 35px;
  margin-top: 15px;
  margin-bottom: 10px;
  font-size: 18px;
}

/*
** Exercises
*/

.article {
  font-family: "DINPro-Medium";
  padding: 5px;
  background: #FFFFFF;
 /* box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20); */
}
li:after {
  content: " ";
  display: block;
  clear: both;
}

img {
	display: block;
	margin: 0px 190px;
}

.difficulte{
  text-align: right;
  display: none;
}

.groupe-consigne {
  padding-bottom: 5px;
}

.consigne {
  font-size: 19px;
  color: #0A0A0A;
  letter-spacing: -0.12px;
  font-family: "DINPro-Bold";
  font-size: 19px;
  text-align: center;
  padding-bottom: 5px;
  padding-left: 45px;
  padding-right: 45px;
}

.complement-consigne {
  font-family: "DINPro-Medium";
  font-size: 18px;
  line-height: 1.4em;
}

.exemple {
  color: #8A8A8A;
  margin-left: 30px;
}

.reference {
  font-family: "DINPro-bold";
  font-size: 17px;
  color: #8A8A8A;
  letter-spacing: -0.11px;
}

.liste-phrases-drag-drop {
  list-style-type: circle;
  color: #8A8A8A;
  padding-bottom: 25px;
  margin-left: 30px;
}

.item-phrases-drag-drop {
  line-height: 36px;
}

.phrase-modele {
  padding-bottom: 1.3em;
}

/*
** DD
*/

.reference-drag-drop {
  padding-bottom: 2.3em;
}

.phrase-drag-drop {
  margin-top: 0px;
  font-family: "DINPro-Medium";
  font-size: 17px;
  color: #8A8A8A;
  letter-spacing: -0.11px;
}

.trou-drag-drop {
  text-align: center;
  background: #EBF9FF;
  border: 2px dashed #02A7E4;
  border-radius: 6px;
  font-family: "DINPro-Bold";
  font-size: 17px;
  color: #02A7E4;
  letter-spacing: -0.13px;
  margin: 5px 3px;
  display: inline-block;
  min-width: 100px;
  min-height: 36px;
  padding: 2px 10px;
  vertical-align: middle;
}

/* rajouts pour test : trou-drag-drop-center, trou-drag-drop-left, trou-drag-drop-right */
.trou-drag-drop-center {
  text-align: center;
  background: #EBF9FF;
  /* border: 2px dashed #02A7E4;
  border-radius: 6px; */
  font-family: "DINPro-Bold";
  font-size: 17px;
  color: #02A7E4;
  letter-spacing: -0.13px;
  margin: 5px 3px;
  display: inline-block;
  min-width: 100px;
  min-height: 36px;
  padding: 2px 10px;
  vertical-align: middle;
}

.trou-drag-drop-left {
  text-align: left;
  background: #EBF9FF;
  /* border: 2px dashed #02A7E4;
  border-radius: 6px; */
  font-family: "DINPro-Bold";
  font-size: 17px;
  color: #02A7E4;
  letter-spacing: -0.13px;
  margin: 5px 3px;
  display: inline-block;
  min-width: 100px;
  min-height: 36px;
  padding: 2px 10px;
  vertical-align: middle;
}

.trou-drag-drop-right {
  text-align: right;
  background: #EBF9FF;
  /* border: 2px dashed #02A7E4;
  border-radius: 6px; */
  font-family: "DINPro-Bold";
  font-size: 17px;
  color: #02A7E4;
  letter-spacing: -0.13px;
  margin: 5px 3px;
  display: inline-block;
  min-width: 100px;
  min-height: 36px;
  padding: 2px 10px;
  vertical-align: middle;
}

.dans-trou {
  padding-top:0px;
}

.reponse-fausse {
  padding-top:0px;
  color:#ED4024;
}

.reponse-vraie {
  padding-top:0px;
  color:#29D437;
}

.reference-drag-drop {
  font-size: 0.9em;
  margin-top:0em;
}

.i {
  font-family: "DINPro-Bold";
}

.mise-en-valeur {
  font-family: "DINPro-Bold";
  color: #FDB913;
}

.commentaire {
 display: none;
}

.scoring {
}

.score {
  display: none !important;
}
#score {
  display: none !important;
}

/*
** DD
*/

.choix-drag-drop {
  margin: 20px 0 -40px 0;
  text-align: center;
  display: inline-flex;
  position: relative;
  left: 50%;
  transform: translate(-50%, -50%);
  touch-action: none;
}

.proposition-drag-drop {
  cursor: pointer;
  line-height: 36px;
  display: inline-block;
  min-width: 100px;
  min-height: 36px;
  padding: 2px 10px;
  border: 2px solid #02A7E4;
  border-radius: 6px;
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20);
  margin: 0.8em;
  text-align: center;
  background-color: #02A7E4;
  font-size: 17px;
  color: #FFFFFF;
  letter-spacing: -0.11px;
  font-family: "DINPro-Medium";
}

.proposition-drag-drop .proposition {
  margin: 0px;
  font-size: 17px;
  color: #FFFFFF;
  letter-spacing: -0.10px;
  font-family: "DINPro-Medium";
}

.reponse-vraie-dd {
  color: #FFFFFF;
  border: 1px solid #29D437 !important;
  background-color: #29D437 !important;
}
.reponse-fausse-dd {
  color: #FFFFFF;
  border: 1px solid #ED4024 !important;
  background-color: #ED4024 !important;
}

ul.liste-options {
  list-style-type: none;
}

/*
** MD
*/

.liste-phrase-deroulant {
  list-style-type: circle;
  color: #8A8A8A;
  margin: auto;
  margin-left: 30px;
  font-size: 17px;
  letter-spacing: -0.11px;
  font-family: "DINPro-Medium";
}

.trou-menu-deroulant {
  outline: none;
  margin: 5px 5px;
  min-width: 80px;
  cursor:pointer;
  border: 2px solid #02A7E4;
  background-color: #EBF9FF;
  font-size: 17px;
  letter-spacing: -0.13px;
  font-family: "DINPro-Bold";
  border-radius: 6px;
}

.reponse-vraie-md {
  color: #FFFFFF;
  border: 1px solid #29D437 !important;
  background-color: #29D437 !important;
}
.reponse-fausse-md {
  color: #FFFFFF;
  border: 1px solid #ED4024 !important;
  background-color: #ED4024 !important;
}

.liste-phrases-drag-drop-recomposer {
  list-style-type: none;
}

.phrase-a-recomposer {
  text-align: center;
  touch-action: none;
}

.phrase-recomposee{
  text-align: center;
  color: #8A8A8A;
  line-height: 36px;
}

span.item-drag-drop-recomposer {
  cursor: pointer;
  display: inline-block;
  line-height: 36px;
  min-width: 100px;
  min-height: 36px;
  border: 2px solid #02A7E4;
  border-radius: 6px;
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20);
  margin: 0.8em;
  text-align: center;
  background-color: #02A7E4;
  font-size: 17px;
  color: #FFFFFF;
  letter-spacing: -0.11px;
  font-family: "DINPro-Medium";
}

span.trou-drag-drop-recomposer {
  line-height: 36px;
  text-align: center;
  background: #EBF9FF;
  border: 2px dashed #02A7E4;
  border-radius: 6px;
  font-family: "DINPro-Bold";
  font-size: 17px;
  color: #02A7E4;
  letter-spacing: -0.13px;
  margin: 2px;
  display: inline-block;
  min-width: 100px;
  min-height: 36px;
  vertical-align: top;
}

span.trou-drag-drop-recomposer > span.item-drag-drop-recomposer {
  display: inline;
  border: 0px;
  border-radius: 0em;
  box-shadow: none;
  background-color: #EBF9FF;
  color: #02A7E4;
  padding: 0em;
  margin-top: 0.3em;
  vertical-align: top;
}

/** #sortable **/
ul.liste-sortable-recomposer-aleatoire  {
  margin: auto;
  width: 300px;
	list-style-type: none;
  padding: 0;
}
ul.liste-sortable-recomposer-aleatoire li {
  cursor: pointer;
  display: block;
  line-height: 40px;
	margin: 15px auto;
  border: 2px solid #02A7E4;
	background:#02A7E4;
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20);
	border-radius: 6px;
	color:#FFFFFF;
  letter-spacing: -0.11px;
	font-family:"DINPro-Medium";
	font-size:17px;
	height: 40px;
  width: 300px;
	text-align: center;
	-ms-touch-action: none;
	}

/*
** QCM
*/

.liste-choix-multiple {
  margin: 0;
}

.item-choix-multiple {
  list-style-type: none;
  padding: 0;
  margin: 0;
  margin-left: -40px;
}

.radiobutton-label {
  line-height: 1.4em;
  padding: 6px 0px;
}

.item-options {
  cursor: pointer;
    display: inline-flex; /* modifié block par vivien */
	margin: 15px 5px;
  padding: 6px 3px 6px 0px;
  border: 1px solid #dfdee0;
	background-color: #FFFFFF;
	border-radius: 6px;
	color: #8A8A8A;
  letter-spacing: -0.11px;
	font-family:"DINPro-Medium";
	font-size: 17px;
	text-align: left;
	-ms-touch-action: none;
}

.item-options.active {
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20);
  border: 1px solid #02A7E4;
	background-color: #02A7E4;
  color: #FFFFFF;
}

.item-options:nth-child(odd) {
  float: left;
  width: 46%;
}

.item-options:nth-child(even) {
  float: right;
  width: 46%;
}
.item-options:nth-child(even)::after {
  content: "";
  display: block;
  clear: both;
}
.item-options:nth-child(odd)::after {
  content: "";
  display: block;
  clear: both;
}

.reponse-vraie-qcm {
  color: #FFFFFF;
  border: 1px solid #29D437 !important;
  background-color: #29D437 !important;
}
.reponse-fausse-qcm {
  color: #FFFFFF;
  border: 1px solid #ED4024 !important;
  background-color: #ED4024 !important;
}

/*
** QCU
*/

.liste-choix-unique {
  list-style-type: circle;
  font-size: 17px;
  letter-spacing: -0.11px;
  font-family: "DINPro-Medium";
  color: #FFF;
}

.liste-options {
  margin-left: -40px;
}

.phrase-qcm {
  font-family: "DINPro-Medium";
  font-size: 17px;
  color: #8A8A8A;
  letter-spacing: -0.11px;
}

.reponse-vraie-qcu {
  color: #FFFFFF;
  border: 1px solid #29D437 !important;
  background-color: #29D437 !important;
}
.reponse-fausse-qcu {
  color: #FFFFFF;
  border: 1px solid #ED4024 !important;
  background-color: #ED4024 !important;
}

/*
** REL
*/

#myCanvas {
  width: 70px;
}
#myCanvasDiv {
  width: 70px;
}

.relier {
  margin: auto;
  border-spacing : 0;
  border-collapse : collapse;
}
.relier td {
  border:none;
  outline:none;
 }

.relier-td-texte-source {
  cursor: default;
  display: inline-block;
  max-width: 180px;
  min-height: 25px;
  padding: 2px 10px;
  border: 1px solid #E1E1E1;
  border-radius: 6px;
  margin: 5px;
  padding: 10px 0px;
  background-color: #FFFFFF;
  font-size: 17px;
  color: #8A8A8A;
  letter-spacing: -0.11px;
  font-family: "DINPro-Medium";
}
.relier-td-texte-cible {
  cursor: default;
  display: inline-block;
  max-width: 180px;
  min-height: 25px;
  padding: 2px 10px;
  border: 1px solid #E1E1E1;
  border-radius: 6px;
  margin: 5px;
  padding: 10px 0px;
  background-color: #FFFFFF;
  font-size: 17px;
  color: #8A8A8A;
  letter-spacing: -0.11px;
  font-family: "DINPro-Medium";
}

.relier-phrase-source {
  margin: 0px 10px 0px 0px;
  line-height: 25px;
}
.relier-phrase-cible {
  margin: 0px 0px 0px 10px;
  line-height: 25px;
}

.gauche {
  cursor: pointer;
  border: 1px solid #8A8A8A;
  border-radius: 100px;
  height: 15px;
  width: 15px;
}
.droite {
  cursor: pointer;
  border: 1px solid #8A8A8A;
  border-radius: 100px;
  height: 15px;
  width: 15px;
}

.gauche.active {
  cursor: pointer;
  border: 1px solid #8A8A8A;
  border-radius: 100px;
  background-color: #02A7E4;
  height: 15px;
  width: 15px;
}
.droite.active {
  cursor: pointer;
  border: 1px solid #8A8A8A;
  border-radius: 100px;
  background-color: #02A7E4;
  height: 15px;
  width: 15px;
}

/*
** SEL
*/

.liste-phrases-selection-clic {
  text-align: justify;
  list-style-type: circle;
  font-family: "DINPro-Medium";
  font-size: 17px;
  color: #8A8A8A;
  letter-spacing: -0.11px;
  line-height: 1.6em;
  word-spacing: -0.3em;
}

.reponse-vraie-sel {
  color: #FFFFFF;
  border: 1px solid #29D437 !important;
  background-color: #29D437 !important;
  border-radius: 6px;
}
.reponse-fausse-sel {
  color: #FFFFFF;
  border: 1px solid #ED4024 !important;
  background-color: #ED4024 !important;
  border-radius: 6px;
}

/*
** TRI
*/

.propositions {
  list-style-type: none;
  text-align: center;
  margin: 10px 10px 40px 10px;
  padding: 0px;
  touch-action: none;
}
.propositions li {
  display: inline-block;
  cursor: pointer;
  line-height: 36px;
  min-width: 100px;
  min-height: 36px;
  padding: 2px 10px;
  border: 2px solid #02A7E4;
  border-radius: 6px;
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20);
  margin: 8px 10px;
  text-align: center;
  background-color: #02A7E4;
}

h5.proposition {
  margin: 0px;
  font-size: 17px;
  color: #FFFFFF;
  letter-spacing: -0.10px;
  font-family: "DINPro-Medium";
}

.tbl_cible {
  width: 100%;
  margin: auto;
  border-collapse: collapse;
  touch-action: none;
}

.tbl_header td {
  background: #FFFFFF;
  border: 1px solid #dfdee0;
  border-radius: 6px;
  color: #8A8A8A;
  font-family: "DINPro-Medium";
  font-size: 17px;
  letter-spacing: -0.11px;
  text-align: center;
}

.tbl_body td {
  background: ##FFFFFF;
  border: 1px solid #dfdee0;
  border-radius: 6px;
  color: #8A8A8A;
  font-family: "DINPro-Medium";
  font-size: 17px;
  letter-spacing: -0.11px;
  text-align: center;
}

.bloc-droppable {
  display: inline-block;
  top: 0px;
  width: 100%;
  min-height: 200px;
  padding: 1%;
  -ms-touch-action: none;
}

.reponse-vraie-tri {
  color: #FFFFFF;
  border: 1px solid #29D437 !important;
  background-color: #29D437 !important;
}
.reponse-fausse-tri {
  color: #FFFFFF;
  border: 1px solid #ED4024 !important;
  background-color: #ED4024 !important;
}

/*
** ZE
*/

.liste-phrases-a-completer {
  list-style-type: circle;
  margin-top: 20px;
}

.phrase-a-completer {
  color: #8A8A8A;
  line-height: 30px;
  margin-top: -30px;
}

.trou-texte-editable {
  display: inline-block;
  min-width: 80px;
  min-height: 30px;
  border: 2px solid #02A7E4;
  border-radius: 6px;
  margin: 5px 0px;
  padding: 0px 6px;
  vertical-align: center;
  font-family: "DINPro-Bold";
  font-size: 17px;
  letter-spacing: -0.11px;
  color: #6d6d6e;
  cursor: text;
  outline: none;
}

/* TEST */
.trou-texte-editable-left {
  display: inline-block;
  min-width: 80px;
  min-height: 30px;
  /*border: 2px solid #02A7E4;
  border-radius: 6px;*/
  text-align: left;
  margin: 5px 0px;
  padding: 0px 6px;
  vertical-align: center;
  font-family: "DINPro-Bold";
  font-size: 17px;
  letter-spacing: -0.11px;
  color: #6d6d6e;
  cursor: text;
  outline: none;
}

/* TEST */
.trou-texte-editable-right {
  display: inline-block;
  min-width: 80px;
  min-height: 30px;
  /*border: 2px solid #02A7E4;
  border-radius: 6px;*/
  text-align: right;
  margin: 5px 0px;
  padding: 0px 6px;
  vertical-align: center;
  font-family: "DINPro-Bold";
  font-size: 17px;
  letter-spacing: -0.11px;
  color: #6d6d6e;
  cursor: text;
  outline: none;
}

/* TEST */
.trou-texte-editable-center {
  display: inline-block;
  min-width: 80px;
  min-height: 30px;
  /*border: 2px solid #02A7E4;
  border-radius: 6px;*/
  text-align: center;
  margin: 5px 0px;
  padding: 0px 6px;
  vertical-align: center;
  font-family: "DINPro-Bold";
  font-size: 17px;
  letter-spacing: -0.11px;
  color: #6d6d6e;
  cursor: text;
  outline: none;
}

.trou-texte-editable-correction-label {
  display: inline-block;
  min-width: 80px;
  min-height: 30px;
  border: 2px solid #02A7E4;
  border-radius: 6px;
  margin: 5px 0px;
  padding: 0px 6px;
  vertical-align: center;
  font-family: "DINPro-Bold";
  font-size: 17px;
  letter-spacing: -0.11px;
  color: #6d6d6e;
  cursor: text;
  outline: none;
  text-align: left;
}

.item-phrases-a-completer {
  margin: 0px;
}

.reponse-vraie-ze {
  color: #FFFFFF !important;
  border: 2px solid #29D437 !important;
  background-color: #29D437 !important;
}
.reponse-fausse-ze {
  color: #FFFFFF !important;
  border: 2px solid #ED4024 !important;
  background-color: #ED4024 !important;
}

/*
**  Custom checkbox input
*/

/* Hide default case */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}

/* Custom label */
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  display: block;
  position: relative;
  padding-left: 45px;
  cursor: pointer;
}

/* Create checkbox */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left: 12px; top: 6px;
  width: 25px; height: 25px;
  border: 1px solid #b1b1b2;
  background-color: #FFFFFF;
  border-radius: 100px;
}

/* Custom if not checked */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
  position: absolute;
  left: 12px; top: 6px;
  width: 25px; height: 25px;
  border-radius: 100px;
  transition: all .2s;
}
/* Custom if checked */
[type="checkbox"]:checked + label:after {
  content: '✔';
  color: #02A7E4;
  font-size: 15px;
  opacity: 1;
  transform: scale(1);
  position: absolute;
  left: 20px; top: 8px;
  transition: all .2s;
}

/*
**  Custom radio input
*/

/* Hide default case */
[type="radio"]:not(:checked),
[type="radio"]:checked {
  position: absolute;
  left: -9999px;
}

/* Custom label */
[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
  display: block;
  height: 150%;
  width: 90%;
  position: relative;
  padding-left: 48px;
  cursor: pointer;
}

/* Create checkbox */
[type="radio"]:not(:checked) + label:before,
[type="radio"]:checked + label:before {
  content: '';
  position: absolute;
  left: 12px; top: 6px;
  width: 25px; height: 25px;
  border: 1px solid #b1b1b2;
  background-color: #FFFFFF;
  border-radius: 100px;
}

/* Custom if not checked */
[type="radio"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
  position: absolute;
  left: 12px; top: 6px;
  width: 25px; height: 25px;
  border-radius: 100px;
  transition: all .2s;
}
/* Custom if checked */
[type="radio"]:checked + label:after {
  content: '✔';
  color: #02A7E4;
  font-size: 15px;
  opacity: 1;
  transform: scale(1);
  position: absolute;
  left: 20px; top: 8px;
  transition: all .2s;
}

/*
** Validations buttons
*/

.boutons-interactivite {
  clear: both;
}

.boutons {
  cursor: pointer;
  margin: 20px 50px;
  text-align: center;
  font-family: "DINPro-Medium";
  font-size: 20px;
  color: #FFFFFF;
  letter-spacing: 1px;

}

.effacer {
  height: 50px;
  width: 180px;
  margin-top: 50px;
  background: #8B8B8B;
  border: 2px solid #8B8B8B;
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20);
  border-radius: 80px;
  color: #FFFFFF;
  float: left;
  margin-left:130px;
}

.correction {
  height: 50px;
  width: 180px;
  margin-top: 50px;
  background: #8B8B8B;
  border: 2px solid #8B8B8B;
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20);
  border-radius: 80px;
  color: #FFFFFF;
  float: left;
}

.valider {
  background: #29D437;
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20);
  border: 2px solid #29D437;
  border-radius: 100px;
  height: 110px;
  width: 110px;
  float: right;
  margin-right:120px;
  padding-top:
}

.aide-button {
  height: 50px;
  width: 180px;
  margin-top: 50px;
  background: #8B8B8B;
  border: 2px solid #8B8B8B;
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20);
  border-radius: 80px;
  color: #FFFFFF;
  float: left;
}

.mot {
	display: inline;
	cursor: pointer;
  padding: 0em 0.3em 0.2em 0.3em;
}

div.BLOC-COULEUR-1  {
  width: 53px;
  height: 30px;
  background-color: #6BB9F0;
  border: 2px solid #FFFFFF;
  display: inline-block;
  cursor: pointer;
  border-radius: 6px;
  margin-left: 15px;
}

div.BLOC-COULEUR-2  {
  width: 53px;
  height: 30px;
  background-color: #EC644B;
  border: 2px solid #FFFFFF;
  display: inline-block;
  cursor: pointer;
  border-radius: 6px;
  margin-left: 15px;
}


div.BLOC-COULEUR-3  {
  width: 53px;
  height: 30px;
  background-color: #33cc33;
  border: 2px solid #FFFFFF;
  display: inline-block;
  cursor: pointer;
  border-radius: 6px;
  margin-left: 15px;
}

div.BLOC-COULEUR-4  {
  width: 53px;
  height: 30px;
  background-color: #cccc00;
  border: 2px solid #FFFFFF;
  display: inline-block;
  cursor: pointer;
  border-radius: 6px;
  margin-left: 15px;
}

.couleur1 {
  background-color: #6BB9F0;
  border-radius: 6px;
  color: #FFFFFF;
}
.couleur2 {
	background-color: #EC644B;
  border-radius: 6px;
  color: #FFFFFF;
}
.couleur3 {
	background-color: #33cc33;
  border-radius: 6px;
  color: #FFFFFF;
}
.couleur4 {
	background-color: #cccc00;
  border-radius: 6px;
  color: #FFFFFF;
}

* html #bloc1 { height: 18em; } /* IE6 */


* html #bloc3 { height: 18em; } /* IE6 */